<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas class="mycanvas" width="500" height="500">
        <script>
            let canvas = document.querySelector(".mycanvas");
            let ctx = canvas.getContext("2d");

            //我的实现
            let p1 = new Promise((resolve, rejected) => {
                let img1 = new Image();
                img1.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pptbz.com%2Fd%2Ffile%2Fp%2F201708%2Fb92908f5427aaa3dc10aea19c06e013d.jpg&refer=http%3A%2F%2Fwww.pptbz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666515384&t=3389d29ed09120485df298cccb517624";
                img1.onload = function () {
                    resolve(img1)
                    // ctx.drawImage(img1,0,0,100,100);
                }
            })

            let p2 = new Promise((resolve, rejected) => {
                let img2 = new Image();
                img2.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-05-12%2F5eba6dd669ec0.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666530900&t=f2657e6c34c9b7b58770d5a6255dda20"
                img2.onload = function () {
                    resolve(img2)
                    // ctx.drawImage(img1,200,200,100,100);
                }
            })

            let p3 = new Promise((resolve, rejected) => {
                let img3 = new Image();

                img3.src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.shancaoxiang.com%2F2021%2F0426%2Fnb5yygzauns130902.jpg&refer=http%3A%2F%2Fp.shancaoxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666530900&t=27c95c7fa342360782ef54f75142f821";
                img3.onload = function () {
                    resolve(img3)
                    // ctx.drawImage(img3, 300, 200, 100, 100);
                }

            });
            // Promise.all([p1, p2, p3]).then(res => {
            //     res.forEach((item, index) => {
            //         console.log('预加载图片成功');
            //         ctx.drawImage(item, 100 + index * 100, 100 + index * 100, 100, 100);
            //     })
            // }).catch(err => {
            //     console.log('预加载图片失败');
            // })

            //海哥的实现
            function loadImge(imgsrcArr) {
                return new Promise((resolve, rejected) => {
                    let resArr = [];
                    let count = 0;
                    imgsrcArr.forEach(imgsrc => {
                        let elimg = new Image();
                        elimg.src = imgsrc
                        elimg.onload = function () {
                            resArr.push(elimg);
                            count++;
                            console.log('loadimg',count);
                            if (count === imgsrcArr.length) {
                                resolve(resArr)
                            }
                        };
                        elimg.onerror =function(){
                            rejected(`图片${count}加载失败`)
                        }
                    });
                })

            }
            let srcarr=["https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.pptbz.com%2Fd%2Ffile%2Fp%2F201708%2Fb92908f5427aaa3dc10aea19c06e013d.jpg&refer=http%3A%2F%2Fwww.pptbz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666515384&t=3389d29ed09120485df298cccb517624",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-05-12%2F5eba6dd669ec0.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666530900&t=f2657e6c34c9b7b58770d5a6255dda20",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp.shancaoxiang.com%2F2021%2F0426%2Fnb5yygzauns130902.jpg&refer=http%3A%2F%2Fp.shancaoxiang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1666530900&t=27c95c7fa342360782ef54f75142f821"]
            loadImge(srcarr)
            .then(res=>{
                console.log(res);
                let count =0;
                res.forEach((item, index) => {
                    count++;
                    console.log('预加载图片成功',count);
                    ctx.drawImage(item, 100 + index * 100, 100 + index * 100, 100, 100);
                })
            })
            .catch(err=>{
                console.log(err);
            })


        </script>
</body>

</html>